<template>
  <view class="page-container">
    <!-- 项目介绍弹窗 -->
    <uni-popup ref="introPopup" type="center" :mask-click="false">
      <view class="intro-popup">
        <view class="intro-header">
          <text class="intro-title">{{vitimInformedConsent.title}}</text>
        </view>
        <view class="intro-content">
					<rich-text :nodes="vitimInformedConsent.content" class="rich-text-content"></rich-text>
        </view>
        <view class="intro-footer">
          <button class="intro-btn" @click="closeIntro">关闭</button>
        </view>
      </view>
    </uni-popup>

    <!-- 主页面内容 -->
    <view class="main-content">
      <!-- 项目介绍模块 -->
      <view v-for="(item,index) in vitimIndexList" class="module-card" @click="goToDetail(item)">
        <view class="module-header">
          <text class="module-title">{{item.title}}</text>
        </view>
        <view class="module-content">
          <text class="module-text">{{item.description}}
          </text>
        </view>
        <view class="module-footer">
          <button class="detail-btn">阅读详情</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {listVitimIndex, getVitimIndex, getVitimConsent} from "@/api/secondVitim/vitimIndex"
	
	export default {
		data() {
			return {
				vitimIndexList: [],
				vitimInformedConsent: {
					title: '第二受害者同伴支持项目介绍',
					content: ''
				}
			}
		},
		onLoad() {
			// 检查是否首次进入，显示项目介绍
			this.getVitimProjectInfo();
			this.checkFirstVisit();
			this.getList();
		},
		methods: {
			//加载知情同意书
			getVitimProjectInfo(){
				getVitimConsent().then(response => {
					this.vitimInformedConsent.content = response.rows[0].content
				})
			},
			getList() {
			  listVitimIndex().then(response => {
			    this.vitimIndexList = response.rows
			  })
			},
			// 检查是否首次访问
			checkFirstVisit() {
				const hasSeenIntro = uni.getStorageSync('has_seen_intro')
				if (!hasSeenIntro) {
					// 延迟显示弹窗，确保页面完全加载
					setTimeout(() => {
						this.$refs.introPopup.open()
					}, 500)
				}
			},
			// 关闭介绍弹窗
			closeIntro() {
				this.$refs.introPopup.close()
				// 记录用户已看过介绍
				uni.setStorageSync('has_seen_intro', true)
			},
			// 跳转到详情页面
			goToDetail(row) {
				// 传递标题和内容到详情页
				const title = encodeURIComponent(row.title || '详情')
				const content = encodeURIComponent(row.content || '暂无详细内容')
				const id = row.id || ''
				uni.navigateTo({
					url: `/pages/detail/project?title=${title}&content=${content}&id=${id}`
				})
			}
		}
	}
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.main-content {
  padding: 20px;
}

.module-card {
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.2s ease;
}

.module-card:active {
  transform: scale(0.98);
}

.module-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 15px 20px;
}

.module-title {
  color: #ffffff;
  font-size: 16px;
  font-weight: bold;
}

.module-content {
  padding: 20px;
}

.module-text {
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
}

.module-footer {
  padding: 0 20px 20px;
  text-align: center;
}

.detail-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 8px 24px;
  font-size: 14px;
  font-weight: bold;
}

.detail-btn:active {
  opacity: 0.8;
}

.intro-popup {
  width: 320px;
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.intro-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20px;
  text-align: center;
}

.intro-title {
  color: #ffffff;
  font-size: 18px;
  font-weight: bold;
}

.intro-content {
  padding: 20px;
  max-height: 400px;
  overflow-y: auto;
}

.intro-text {
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-line;
}

.intro-footer {
  padding: 15px 20px 20px;
  text-align: center;
  border-top: 1px solid #f0f0f0;
}

.intro-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: 14px;
  font-weight: bold;
}

.intro-btn:active {
  opacity: 0.8;
}
</style>
